import { useState, useRef, useEffect } from 'react'
import { io } from 'socket.io-client'

// 自定义的倒计时的 Hook
export const useCountDown = (num = 60) => {
  // 创建一个响应式的计数器，用于实现秒数自减
  const [count, setCount] = useState(num)
  // 这个 timerRef 用于存储定时器的 timer id
  const timerRef = useRef(null)
  // 控制按钮是否被禁用的布尔值状态，true 表示禁用按钮；false 不禁用
  const [isDown, setIsDown] = useState(false)

  // 创建一个用于开启倒计时的函数
  function start() {
    setIsDown(true)
    // 把定时器的 id 存储到 timerRef 中
    timerRef.current = setInterval(() => {
      setCount((prev) => prev - 1)
    }, 1000)
  }

  useEffect(() => {
    if (count <= 0) {
      clearInterval(timerRef.current)
      setIsDown(false)
      setCount(num)
    }
  }, [count, num])

  useEffect(() => {
    // 在副作用函数中，return 出去的 fn 是清理函数，
    // 当组件被销毁的时候，执行这个清理函数
    return () => clearInterval(timerRef.current)
  }, [])

  return { start, count, isDown }
}

// 自定义的防抖的 Hook
export const useFd = () => {
  const timerRef = useRef(null)

  function fd(cb) {
    // 形参中的 ...arg 是 REST 参数
    return (...arg) => {
      // 先清除上一个延时器
      clearTimeout(timerRef.current)
      // 再开一个新的延时器
      timerRef.current = setTimeout(() => {
        cb(...arg)
      }, 500)
    }
  }

  // return 用于防抖的函数
  return fd
}

// 自定义创建 socket 连接的 Hook
export const useSocket = (url, cb) => {
  const socket = useRef(null)

  useEffect(() => {
    // 在这里创建聊天的连接
    socket.current = io(url, {
      reconnection: true,
      reconnectionAttempts: 5,
      reconnectionDelay: 5000,
      timeout: 8000
    })

    // 绑定 message 事件，接收服务器发送给我们的消息
    socket.current.on('message', cb)

    // 当组件卸载的时候，清理聊天的连接对象，防止内存泄漏
    return () => socket.current.close()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return socket
}
